/////////////////////////////////////////////
// Режимразроботки
//////////////////////////////////////////////////////////↓
let mode = 'development';
if (process.env.NODE_ENV === 'production') {
  mode = 'production'
}
const webpack = require('webpack');

console.log(mode + ' mode');
const path = require('path');
/////////////////////////////////////////////
// подключаем плавгины
//////////////////////////////////////////////////////////↓
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");



module.exports = {
  mode: mode,
  entry: path.resolve(__dirname, 'src', 'index.js'),//входной  фаил
  output: {
    path: path.resolve(__dirname, 'dist'), //выходная папака
      filename: 'js/main.[contenthash].js',
    clean: true,
  },
  plugins: [
    new HtmlWebpackPlugin({//оброботка html
        template: 'src/index.html' // 
    }),
      new HtmlWebpackPlugin({//оброботка html
          filename: 'product.html',
          template: 'src/product.html'// 
    }),
      new HtmlWebpackPlugin({//оброботка html
          filename: 'contact.html',
          template: 'src/contact.html'// 
      }),
    new MiniCssExtractPlugin({//оброботка css
        filename: 'css/[name].css'//создание main.css
    }),
      new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery',
          'window.jQuery': 'jquery',
          jquery: 'jquery'
      })
  ],
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",//выгрузка .html
      },
      {
          test: /\.(c|sa|sc)ss$/i,
        use: [

            (mode === 'production') ? "style-loader" : MiniCssExtractPlugin.loader,//выгрузка .css
            "css-loader",
            "postcss-loader",//префиксы css
            "sass-loader",//оброботка sass

              ],
          },
      {
        test: /\.woff2?$/i,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name].[ext]'
        }
      },
      {
        test: /\.jpe?g$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/imgJpeg/[name].[ext]'
        }
      },

      {
        test: /\.png$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/imgPng/[name].[ext]'
        }
      },

      {
        test: /\.svg$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/imgSvg/[name].[ext]'
        }
      },
      {
        test: /\.ico$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/imgIco/[name].[ext]'
        }
      },
      {
        test: /\.gif$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/imgGif/[name].[ext]'
        }
      },




      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-proposal-object-rest-spread']
          }
        }
      }
    ],

  },
}
// /\.(c|sa|sc)ss$/i,